<template>
  <div>
    <div id="mapContainer"></div>
    <div class="text-view" id="move-image">
      <img src="@/assets/image/diagnosisDetails-bg.png" alt="">
      <h3>我是文字</h3>
    </div>
  </div>

</template>

<script>
import { loadModules } from 'esri-loader';

  export default {
    data() {
      return {
        mapView:{},
        map:{},
        graphicsLayer: {},
        bg:require('@/assets/image/diagnosisDetails-bg.png')
      }
    },
    mounted(){
      this._createMapView();
      this.addPosition('1',118.767413,32.041544,null)
      this.addPicture(118.767413,32.041544)
      this.clickProp()
    },
    methods:{
      async _createMapView() {
        let that=this
        const options = {
            url: 'https://js.arcgis.com/4.18/init.js',
            css: 'https://js.arcgis.com/4.18/esri/themes/light/main.css',
        };
        const [Map, SceneView,ElevationLayer,GraphicsLayer,Point,Camera ] = await loadModules(
          [
            'esri/Map',
            'esri/views/SceneView',
            'esri/layers/ElevationLayer',
            'esri/layers/GraphicsLayer',
            'esri/geometry/Point',
            'esri/Camera'
          ],
          options,
        );

        this.map = new Map({
          basemap: "hybrid",
          ground: {
            layers: [ new ElevationLayer({
              url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
            })]
          }
        });
        const view = new SceneView({
          map:this.map,
          zoom: 9,
        //经度纬度
          center: [118.767413, 32.041544],
          container: "mapContainer",
          viewingMode: "local",
          // spatialReference: {
          //   wkid: 4326
          // },
        })
        this.mapView=view
        const cam = new Camera({
          heading: 90, // face due east
          tilt: 45, // looking from a bird's eye view
          position: {
            latitude: 32.041544,
            longitude: 118.767413,
            z: 5000,
            spatialReference: { wkid: 3857 }
          }
        });

        view.camera = cam;

        view.ui.components = [] // 清除掉地图左上角默认的缩放图标
        var coordsWidget = document.createElement('div')
      coordsWidget.id = 'coordsWidget'
      coordsWidget.className = 'esri-widget esri-component'
      coordsWidget.style.padding = '7px 15px 5px'
      view.ui.add(coordsWidget, 'bottom-right')
                
        // 监听地图点击事件
        // view.on('click',function(event){
        //   console.log(event)
        //   console.log(`经度：${event.mapPoint.longitude},纬度：${event.mapPoint.latitude}`)
        //   this.addPicture(event.mapPoint.longitude,event.mapPoint.latitude)
        // })
      },
      // 做标记
      async addPosition() {
        const [Map, SceneView,ElevationLayer,GraphicsLayer,Graphic,Point ] = await loadModules(
          [
            'esri/Map',
            'esri/views/SceneView',
            'esri/layers/ElevationLayer',
            'esri/layers/GraphicsLayer',
            "esri/Graphic",
            'esri/geometry/Point'
          ],
        );
        const graphicsLayer = new GraphicsLayer();
        this.map.add(graphicsLayer);
        this.graphicsLayer=graphicsLayer
        // let { Point, Graphic } = this.map
        let point =new Point({
          longitude: 118.767413, 
          latitude: 32.041544
          // spatialReference: this.mapView.spatialReference
        })
        var symbol = {
          type: 'picture-marker',
          url: 'https://img1.baidu.com/it/u=1670214688,1888102973&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          width: 25,
          height: 25
        }
        var positionGraphic = new Graphic({
          geometry: point,
          symbol: symbol,
          // attributes: {
          //   data
          // }
        })
        var textSymbol = {
          type: 'text',
          color: '#48b1f8',
          horizontalAlignment: 'center',
          verticalAlignment: 'middle',
          yoffset: -55,
          // text: 'text',
          font: {
            size: 20
          }
        }
        var textGraphic = new Graphic({
          geometry: point,
          symbol: textSymbol,
          // attributes: {
          //   data
          // }
        })

        this.graphicsLayer.add(positionGraphic)
        this.graphicsLayer.add(textGraphic)
      },
      // 添加图片
      async addPicture(lng,lat){
        const [Map, SceneView,ElevationLayer,GraphicsLayer,Graphic,Point ] =await loadModules(
          [
            'esri/Map',
            'esri/views/SceneView',
            'esri/layers/ElevationLayer',
            'esri/layers/GraphicsLayer',
            "esri/Graphic",
            'esri/geometry/Point'
          ],
        );
        const graphicsLayer = new GraphicsLayer();
        this.map.add(graphicsLayer);
        this.graphicsLayer=graphicsLayer
        // let { Point, Graphic } = this.map
        let point =new Point({
          longitude: lng+0.01, 
          latitude: lat+0.01,
          // spatialReference: this.mapView.spatialReference
        })
        var symbol = {
          type: 'picture-marker',
          url: this.bg,
          width: 120,
          height: 75
        }
        var positionGraphic = new Graphic({
          geometry: point,
          symbol: symbol,
          // attributes: {
          //   data
          // }
        })
        var textSymbol = {
          type: 'text',
          color: '#48b1f8',
          horizontalAlignment: 'center',
          verticalAlignment: 'middle',
          yoffset: -55,
          text:'我是测试',
          font: {
            size: 20
          }
        }
        var textGraphic = new Graphic({
          geometry: point,
          symbol: textSymbol,
          // attributes: {
          //   data
          // }
        })

        this.graphicsLayer.add(positionGraphic)
        this.graphicsLayer.add(textGraphic)
        
      },
      // 鼠标点击弹出框
      async clickProp(){
        const options = {
            url: 'https://js.arcgis.com/4.18/init.js',
            css: 'https://js.arcgis.com/4.18/esri/themes/light/main.css',
        };
        const [Map, SceneView,ElevationLayer,GraphicsLayer,Point,Camera,Graphic ] =await loadModules(
          [
            'esri/Map',
            'esri/views/SceneView',
            'esri/layers/ElevationLayer',
            'esri/layers/GraphicsLayer',
            'esri/geometry/Point',
            'esri/Camera',
            "esri/Graphic",
          ],
          options,
        );

        
        // 监听地图点击事件
        let view=this.mapView
        let that=this
        view.on('click',function(event){
          console.log('click事件',event)
          console.log(`经度：${event.mapPoint.longitude},纬度：${event.mapPoint.latitude}`)
          // that.$options.methods.addPicture(event.mapPoint.longitude,event.mapPoint.latitude)
          const graphicsLayer = new GraphicsLayer();
          that.map.add(graphicsLayer);
          that.graphicsLayer=graphicsLayer
        // let { Point, Graphic } = this.map
        let point =new Point({
          longitude: event.mapPoint.longitude+0.01, 
          latitude: event.mapPoint.latitude+0.01,
          // spatialReference: this.mapView.spatialReference
        })
        var symbol = {
          type: 'picture-marker',
          url: that.bg,
          width: 120,
          height: 75
        }
        var positionGraphic = new Graphic({
          geometry: point,
          symbol: symbol,
          // attributes: {
          //   data
          // }
        })
        var textSymbol = {
          type: 'text',
          color: '#48b1f8',
          horizontalAlignment: 'center',
          verticalAlignment: 'middle',
          yoffset: -55,
          text:`我是测试
           111`,
          font: {
            size: 20
          }
        }
        var textGraphic = new Graphic({
          geometry: point,
          symbol: textSymbol,
          // attributes: {
          //   data
          // }
        })

        that.graphicsLayer.add(positionGraphic)
        that.graphicsLayer.add(textGraphic)
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
#mapContainer{
  width: 800px;
  height: 600px;
  position: relative;
}
.text-view{
  width: 180px;
  height: 150px;
  img{
    width: 100%;
    height: 100%;
  }
}
</style>